﻿@model NFine.Domain.Entity.ProductManage.ProductEntity
@{
    ViewBag.Title = "订单详情确认";
    Layout = "~/Views/Shared/_LayoutWeui.cshtml";
}

<style>
    body {
        background-color: #fff;
    }

    .weui-cells {
        margin-top: 0;
    }

    .weui-panel {
        padding-bottom: 0px;
    }

    .pro {
        padding-left: 0.1rem;
        padding-right: 0.3rem;
    }

    .proName {
        color: #000;
        line-height: 1rem;
    }

    .price {
        color: #f60;
        font-size: 0.7rem;
    }

    .num {
        width: 1.5rem;
        height: 1rem;
        text-align: center;
    }

    .setnum {
        border: 1px solid rgb(169,169,169);
        display: block;
        margin-top: 0.15rem;
        height: 1.1rem;
        line-height: 1.1rem;
        width: 1.2rem;
        text-align: center;
    }

    .money {
        color: #f60;
        font-size: 0.7rem;
        float: right;
        margin-right: 0.5rem;
    }

    .btn {
        float: right;
        width: 30%;
        height: 2.5rem;
        background-color: #35a4fe;
        border-radius: 0px;
    }

        .btn::after {
            border-radius: 0px;
        }

    .combined {
        margin-top: 0.5rem;
        font-size: 0.7rem;
        float: right;
        padding-right: 0.5rem;
    }

    .foot div a {
        display: block;
        background-color: #00A4FF;
        color: white;
        font-size: 14px;
        line-height: 32px;
        width: 5rem;
        text-align: center;
        border-radius: 16px;
    }

    #fenshu, #jine, .link_span {
        color: #00A4FF;
        text-decoration: underline;
    }

    .btm {
        height: 2.6rem;
        position: relative;
    }

        .btm:after {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 15px;
            height: 1px;
            border-top: 1px solid #d9d9d9;
            color: #d9d9d9;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            left: 15px;
        }

    #F_gmxy {
        position: absolute;
        width: 100%;
        height: 0px;
        overflow: auto;
        left: 0;
        text-align: center;
        background: white;
    }

    .detail_info img {
        width: 90%;
        display: block;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .weui-check_label {
        font-size:14px;
    }
</style>
<form id="form1">
    <div>
        <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_appmsg pro">
                <div class="weui-media-box__hd" style="height:80px;width:80px">
                    <img class="weui-media-box__thumb" src="@Model.F_ImageUrl" style="width:100%;height:100%" onerror="javascript:this.src='/Content/img/imgdefalt.jpg';this.onerror=null">
                </div>
                <div class="weui-media-box__bd">
                    <div style="height:55px;">
                        <p class="weui-media-box__desc proName">@Model.F_ProductName</p>
                    </div>
                    <div>
                        <span id="spanprice" class="price">￥@Model.F_Price</span>
                        @*<span style="float:right">
                            <span class="setnum" style="border-right:none;float:left;" onclick="addProductCount(-1)">-</span>
                            <input name="ProductNumber" id="productCount" type="number" value="1" class="num" onchange="changeMoney()" onkeyup="numOnly()" />
                            <span class="setnum" style="border-left:none;float:right" onclick="addProductCount(1)">+</span>
                        </span>*@
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="yyxx" class="weui-cells weui-cells_form">
        @*<div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">预约时间：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="txtDate" value="" placeholder="请选择预约时间" name="txtDate" readonly="readonly" />
            </div>
        </div>*@
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">姓名：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入收件人姓名" id="Consignee" name="Consignee" value="@ViewData["name"]">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">手机号码：</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" placeholder="请输入手机号码" id="ContactNumber" name="ContactNumber" value="@ViewData["phone"]">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收件地址：</label></div>
            <div class="weui-cell__bd formValue">
                <input class="weui-input" type="text" placeholder="请输入详细地址" name="Address" value="@ViewData["addr"]">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">备注：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="Remark" id="Remark" placeholder="请输入备注信息" />
            </div>
        </div>
    </div>
    @*<div class="weui-cells__tips">
        @Html.Raw(ViewData["wxts"])
    </div>
    <div id="F_gmxy" class="detail_info">
        @Html.Raw(Model.F_gmxy)
    </div>*@
    @*<div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">商品总额</label></div>
                <div class="weui-cell__bd">
                    <span class="money" id="allMoney1">￥@Model.F_Price</span>
                </div>
            </div>
        </div>*@
    <input type="hidden" name="ProductId" value="@Model.F_Id" />
    <input type="hidden" name="ProductName" value="@Model.F_ProductName" />
    <input type="hidden" name="TotalMoney" id="totalMoney" value="@Model.F_Price" />
    <input type="hidden" name="ProductPrice" id="ProductPrice" value="@Model.F_Price" />
    <input type="hidden" name="kcId" id="kcId" />
</form>
<div id="divbtm" style="height:7.2rem;"></div>
<div class="foot">
    <div style="display: flex;align-items:center; font-size:.8rem; height:2rem; ">
        <div style="margin-left:20px;">
            <input id="gmxycp" name="gmxycp" type="checkbox" checked="checked" style="margin-top:5px;">
        </div>
        <div>
            <label for="gmxycp">阅读并同意该商品的购买协议</label>@*<span class="link_span" id="gmxy"></span>*@
        </div>
    </div>
    @*<div class="btm" style="display: flex;justify-content:space-around;align-items:center; color:#434343; font-size:1rem; font-weight:bold;">
        <div>定购份数：<span id="fenshu">1</span>份</div>
        <div>总金额：<span id="jine">@Model.F_Price</span>元</div>
    </div>*@
    <div class="btm" style="display: flex;justify-content:space-around;align-items:center;">
        <div><a href="/WeiXin/index">返回首页</a></div>
        @*<div><a href="tel:1588724422">联系客服</a></div>*@
        <div><a id="btnSub" onclick="submitForm()" href="#" style="background-color:#F9B911; color:#584A2D">提交订单</a></div>
    </div>
</div>
@section footScript
{
    <script src="~/Content/js/md5/jquery.md5.js"></script>
    <script type="text/javascript">

        //$("#txtDate").calendar();
        var proPrice = '@Model.F_Price';

        var $Fgmxy = $("#F_gmxy");
        var topa, bottom;
        topa = $("#yyxx").position().top;
        bottom = $("#divbtm").position().top;
        $Fgmxy.css("top", bottom);
        $("#gmxy").click(function () {
            if ($Fgmxy.height() == 0) {
                $Fgmxy.animate({
                    height: (bottom - topa) + "px", top: topa + "px"
                }, 800);
            }
            else {
                $Fgmxy.animate({
                    height: "0px", top: bottom + "px"
                }, 800);
            }
        });
        var kc=null;
        $.ajax({
            type: "get",
            url: "/WeiXin/GetGridJsonByProID?proID=@Model.F_Id",
            success: function (json) {
                var reskc = JSON.parse(json);
                var items = [];
                for (var index = 0; index < reskc.length; index++)
                {
                    var title = "";
                    var name=reskc[index].ProSubName == null ? "" : reskc[index].ProSubName +"<span style='color:red;font-size:12px;'>￥"+ reskc[index].SubPrice+"</span>";
                    if (reskc[index].F_Count == 0) {
                        title = name+ "<span style='color:red'>【余量:售罄】</span>"
                    }
                    else {
                        title = name + "<span style='color:green'>【余量:" + reskc[index].F_Count + "】</span>"
                    }
                    items.push({ "title":  (reskc[index].F_Date.substr(5, 5).replace("-","月")) + "日 " + title, "value": reskc[index].F_Id, "obj": reskc[index] });
                }
                $("#txtDate").select({
                    title: "请选择预约时间",
                    items: items,
                    onChange: function (index) {
                        if (index.origins&&index.origins.length>0) {
                            kc = index.origins[0].obj;
                            if (kc.F_Count > 0) {
                                $("#txtDate").val(kc.F_Date.substr(0, 10) + "【余量:" + kc.F_Count + "】");
                                if (kc.ProSubName != null) {
                                    proPrice = kc.SubPrice;
                                    changeMoney();
                                    $("#spanprice").text(kc.ProSubName + "    ￥" + kc.SubPrice);
                                    $("#ProductPrice").val(kc.SubPrice);
                                }
                            }
                            else {
                                $("#txtDate").val("");
                                kc = null;
                            }
                        }
                        else {
                            $("#txtDate").val("");
                            kc = null;
                        }
                    }
                    //    [
                    //  {
                    //      title: "iPhone 3GS",
                    //      value: "001",
                    //  }
                    //]
                });
            }
        });

        function addProductCount(count) {
            //获取当前数值
            var curCount = $('#productCount').val();
            if (curCount == null || curCount == '')
                curCount = '1';


            //计算增加后的数值
            var result = count + parseInt(curCount);

            if (result < 1) {
                result = 1;
            }
            if (kc && result > kc.F_Count)
            {
                result = kc.F_Count;
            }

            // 赋值input
            $('#productCount').val(result);

            changeMoney();
        }

        function numOnly() {
            var $num = $("#productCount");//.val();
            if ($num.val().length == 1) {
                $num.val( $num.val().replace(/[^1-9]/g, ''));
            } else {
                $num.val( $num.val().replace(/\D/g, ''));
            }
        }

        function changeMoney() {
            var curCount = $('#productCount').val();
            if (curCount == null || curCount == '')
                curCount = '1';
            if (parseInt(curCount) < 1) {
                curCount = '1';
            }
            //获取单价
            var _price = parseFloat(proPrice);
            var allm = (_price * curCount).toFixed(2);
            $('#allMoney2').text('￥' + allm);
            $('#allMoney1').text('￥' + allm);
            $('#totalMoney').val(allm);
            $('#jine').text(allm);
            $("#fenshu").text(curCount);

        }

        function submitForm() {
            if (kc==null||kc.F_Count==0) {
                $.toptip('请重新选择预约时间！', 'error');
                return;
            }

            $("#kcId").val(kc.F_Id);

            if ($("#Consignee").val() == "") {
                $.toptip('预约人不能为空', 'error');
                return;
            }

            if ($("#ContactNumber").val().length != 11) {
                $.toptip('预约电话请输入有效的手机号', 'error');
                return;
            }

            if ($("#Remark").val() == "") {
                $.toptip('备注信息不能为空，请输入出发时间或者接站时间', 'error');
                $("#Remark").select();
                return;
            }

            if (!$("#gmxycp")[0].checked) {
                $.toptip('请先阅读并同意购买协议', 'error');
                return;
            }
            $.showLoading();
            var data = $("#form1").serialize();
            $.ajax({
                type: "post",
                url: "/WeiXin/SubmitOrder",
                data: $("#form1").serialize(),
                success: function (json) {
                    var res = JSON.parse(json);
                    if (res.state == "success") {
                        res = JSON.parse(res.data);
                        WeixinJSBridge.invoke(
                               'getBrandWCPayRequest',
                               res.wx,
                               function (res1) {
                                   //$.toast(res1.err_msg);
                                  // $("#Remark").val(res1.err_msg);
                                   if (res1.err_msg == "get_brand_wcpay_request:ok") {
                                       // console.log('前端返回成功支付');
                                       $.toast("支付操作成功！", "success", function () {
                                           window.location.href = "success";
                                       });
                                   }
                                   else {
                                       $.toast("支付取消", "error");
                                   }
                               }
                           );
                    }
                },
                complete: function () {
                    $.hideLoading();
                }
            });
        }

    </script>
}
